<%--
  Created by IntelliJ IDEA.
  User: ht
  Date: 2023/3/12
  Time: 13:44
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>JSON交互——提交JSON数据</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <script type="text/javascript"
            src="${pageContext.request.contextPath}/js/jquery-1.11.3.min.js">
    </script>
    <script type="text/javascript">
        function testJson(){
            // 获取输入的客户姓名和年龄
            console.log("hhhhh")
            var name = $("#name").val();
            var age = $("#age").val();

            $.ajax({
                url : "${pageContext.request.contextPath}/testJson",
                type : "post",
                // data表示发送的数据
                data :JSON.stringify({name:name,age:age}),
                // 定义发送请求的数据格式为JSON字符串
                contentType : "application/json;charset=UTF-8",
                //定义回调响应的数据格式为JSON字符串,该属性可以省略
                dataType : "json",
                //成功响应的结果
                success : function(data){
                    if(data != null){
                        $("#msg").empty();
                        $("#msg").append("从控制器返回的JSON格式数据："+JSON.stringify(data)+"  客户姓名为："+data.name+"年龄为："+data.age);
                    }
                }
            });
        }
    </script>
</head>
<body>
    <form>
        客户姓名：<input type="text" name="name" id="name"><br/>
        年龄：<input type="text" name="age" id="age"><br />
        <input type="button" value="提交JSON格式数据" onclick=" testJson()" />
    </form>
    <br>
    <div id="msg"></div>
</body>
</html>
